* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.wstool {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  user-select: none;
}

.wstool > header {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  border-bottom: 1px solid #666;
  padding: 0.5em;
  h1 {
    user-select: text;
    padding: 0 0 0 0.5em;
    margin: 0;
    font-size: 1.5em;
    em {
      font-size: 16px;
      font-style: normal;
      font-weight: normal;
      color: #f80;
      margin: 0 0.5em;
    }
    u {
      text-decoration: none;
      font-size: 12px;
      color: #cc0;
      font-weight: normal;
    }
  }
  aside {
    a {
      font-size: 12px;
      color: #0ff;
      margin: 0 0.5em;
      i {
        text-decoration: none;
        margin-right: 0.3em;
      }
      &:hover {
        color: #ff0;
      }
    }
    > i {
      font-size: 1.2em;
      margin: 0 0.5em;
    }
    button {
      margin: 0 1px;
    }
  }
}

.wstool > pre.as-error {
  background: #f00;
  color: #ff0;
  padding: 0;
  margin: 0;
}

.wstool {
  div.as-hex {
    opacity: 0.6;
    &:hover {
      opacity: 1;
    }
  }
  div.as-nl {
    opacity: 0.6;
    &:hover {
      opacity: 1;
    }
  }
  &.use-hex {
    div.as-hex {
      background-color: #080;
      color: #fff;
      opacity: 1;
    }
  }
  &.use-nl {
    div.as-nl {
      background-color: #08f;
      color: #fff;
      opacity: 1;
    }
  }
}

section {
  flex: 1 1 auto;
  padding: 0.5em;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  nav {
    flex: 0 0 auto;
    width: 30%;
    max-width: 360px;
    position: relative;
    ul {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      list-style: none;
      padding: 0.5em;
      margin: 0;
      overflow: auto;
      li {
        cursor: pointer;
        padding: 0.2em 0.5em 0.5em 0.5em;
        opacity: 0.6;
        border-bottom: 1px dashed #999;
        &:first-child {
          border-top: 1px dashed #999;
        }
        div.as-info {
          font-size: 1.2em;
          line-height: 1.6em;
          i.current-dot {
            margin: 0 0.5em;
            color: #fff;
          }
          > span {
            i {
              transition: 0.3s;
            }
            i:hover {
              transform: scale(1.2) rotate3d(0.5, 0.5, 0.5, 360deg);
              color: #f33;
            }
          }
        }
        div.as-tip {
          text-align: right;
          code {
            margin: 0 0.5em;
            &.as-addr-port {
              color: #0ff;
              &:before {
                display: "inline";
                content: ":";
              }
            }
            &.as-client-id {
              color: #888;
            }
          }
        }
        code {
          font-style: normal;
          font-weight: normal;
          font-family: inherit;
        }
        &.is-connected {
          color: #0f0;
        }
        &.is-current {
          font-weight: bold;
          background: rgba(255, 255, 255, 0.2);
          opacity: 1;
        }
        &:hover {
          background: #666;
        }
      }
    }
  }
  main {
    flex: 1 1 auto;
    border: 1px solid #555;
    position: relative;
    padding: 50px 0 0 0;
    header {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      padding: 0;
      display: flex;
      flex-wrap: nowrap;
      align-items: stretch;
      div {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        padding: 0 0.4em;
        cursor: pointer;
        &.as-clr {
          padding: 0 0.5em;
          a {
            color: #ff0;
          }
          a:hover {
            text-decoration: underline;
          }
        }
      }
      input {
        flex: 1 1 auto;
        width: 100%;
        height: 50px;
        padding: 0 0.8em;
        outline: none;
        font-size: 16px;
        font-family: inherit;
        background-color: #333;
        color: #0f0;
        &[readonly] {
          opacity: 0.4;
        }
      }
      textarea {
        flex: 1 1 auto;
        width: 100%;
        height: 50px;
        padding: 0.8em;
        outline: none;
        font-size: 16px;
        font-family: inherit;
        background-color: #333;
        color: #0f0;
        resize: none;
        &[readonly] {
          opacity: 0.4;
        }
      }
    }
    blockquote {
      user-select: text;
      position: absolute;
      top: 50px;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 0;
      padding: 0.5em;
      line-height: 1.6em;
      background-color: #000;
      color: #fff;
      margin: 0;
      overflow-x: scroll;
      overflow-y: scroll;
      font-family: inherit;
      white-space: pre-wrap;
      p {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin: 0;
        padding: 0;
        > * {
          display: block;
          white-space: nowrap;
        }
        u {
          text-decoration: none;
          text-align: center;
          opacity: 0.6;
          margin: 0 0.2em;
        }
        em {
          font-style: normal;
          opacity: 0.6;
        }
        span {
          flex: 1 1 auto;
          white-space: normal;
          word-wrap: break-word;
        }
        span.as-dis {
          width: 50%;
          display: block;
          white-space: pre-wrap;
        }
        span.as-hex {
          width: 100%;
          color: #0ff;
        }
        i {
          font-size: 0.8em;
          margin: 0 0.5em;
        }
        &.as-type-IN {
          color: #fff;
        }
        &.as-type-OUT {
          color: #ff8;
        }
      }
      .list-enter-active,
      .list-leave-active {
        transition: all 0.5s ease;
      }
      .list-enter-from,
      .list-leave-to {
        opacity: 0;
        transform: translateX(-100px);
      }
    }
    footer {
      position: absolute;
      left: -60px;
      bottom: 0;
      padding: 0.2em;
      > div {
        padding: 0.5em;
        background: #444;
        cursor: pointer;
        margin: 4px;
        text-align: center;
        &.is-on {
          background: #08f;
          color: #fff;
          &.echo-back {
            background-color: #c00;
          }
        }
        &.log-order {
          background: #0ff;
          color: #008;
          &.is-desc {
            background: #0f8;
            color: #000;
          }
        }
      }
    }
  }
}
